<template>
    <el-dialog top="90px" :visible.sync="visible" :title="dataForm.details ? '详情' :(!dataForm.id ? $t('add') : $t('update'))" :close-on-click-modal="false" :close-on-press-escape="false" @close="close()" :destroy-on-close="true" @opened="opened()">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '140px' : '130px'" :disabled="disabled">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="起点名称" prop="nameStart">
                        <el-input v-model="dataForm.nameStart" :placeholder="disabled?'':'起点名称'"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="终点名称" prop="nameEnd">
                        <el-input v-model="dataForm.nameEnd" :placeholder="disabled?'':'终点名称'"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="发车点" prop="startArea">
                        <el-input v-model="dataForm.startArea" :placeholder="disabled?'':'发车点'"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="时刻表" prop="time">
                        <el-input v-model="dataForm.time" :placeholder="disabled?'':'时刻表'"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="经度" prop="longitude">
                        <el-input v-model="dataForm.longitude" :placeholder="disabled?'':'经度'" type="number"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="纬度" prop="latitude">
                        <el-input v-model="dataForm.latitude" :placeholder="disabled?'':'纬度'" type="number"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="交通工具类型" prop="type">
                        <SelectComponent ref="type" dictType="traffic_type" v-model="dataForm.type" :placeholder="disabled?'':'交通工具类型'">
                        </SelectComponent>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="地址" prop="province">
                        <el-select v-model="dataForm.province" :placeholder="disabled?'':'省编码'" clearable style="width:14%" @change="
                (val) => {
                  regionChange(val, 'province');
                }
              ">
                            <el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <el-select v-model="dataForm.city" :placeholder="disabled?'':'市'" clearable style="width:14%;margin:0 1%" @change="
                (val) => {
                  regionChange(val, 'city');
                }
              ">
                            <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <el-select v-model="dataForm.area" :placeholder="disabled?'':'区'" clearable style="width:14%" @change="
                (val) => {
                  regionChange(val, 'area');
                }
              ">
                            <el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <el-input style="width:14%;margin:0 1%" v-model="dataForm.street" :placeholder="disabled?'':'街道'"></el-input>
                        <el-input v-model="dataForm.areaDetail" :placeholder="disabled?'':'详细地址'" style="width:40%"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="温馨提示" prop="tips">
                        <el-input v-model="dataForm.tips" :placeholder="disabled?'':'温馨提示'" type="textarea" :rows="2"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="详情介绍" prop="info">
                        <el-input v-model="dataForm.info" :placeholder="disabled?'':'详情介绍'" type="textarea" :rows="3"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="dataForm.remark" :placeholder="disabled?'':'备注'" type="textarea" :rows="2"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template slot="footer" v-if="!disabled">
            <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
            <el-button type="primary" @click="dataFormSubmitHandle()">{{
                $t("confirm")
                }}</el-button>
        </template>
    </el-dialog>
</template>

<script>
    import debounce from "lodash/debounce";
    import mixinRegionModule from "@/mixins/region-module";
    export default {
        mixins: [mixinRegionModule],
        data() {
            return {
                visible: false,
                dataForm: {
                    id: "",
                    nameStart: "",
                    nameEnd: "",
                    startArea: "",
                    time: "",
                    province: "",
                    city: "",
                    area: "",
                    street: "",
                    areaDetail: "",
                    longitude: "",
                    latitude: "",
                    type: "",
                    tips: "",
                    info: "",
                    status: "",
                    remark: "",
                    delFlag: "",
                    creator: "",
                    createDate: "",
                    updater: "",
                    updateDate: "",
                },
            };
        },
        props: {
            disabled: Boolean
        },
        created() {
            this.provincAreaDetailInfoList();
        },
        computed: {
            dataRule() {
                return {
                    latitude: [{
                        validator: this.$formValidate.validateDecimal("纬度", 11, 8),
                        trigger: ["blur"],
                    }, ],
                    longitude: [{
                        validator: this.$formValidate.validateDecimal("经度", 11, 8),
                        trigger: ["blur"],
                    }, ],
                };
            },
        },
        created() {
            this.provincAreaDetailInfoList();
        },
        methods: {
            opened() {
                this.provincAreaDetailInfoList();
                if (this.dataForm.city) {
                    this.cityAreaDetailInfoList(this.dataForm.province);
                }
                if (this.dataForm.area) {
                    this.countyAreaDetailInfoList(this.dataForm.city);
                }
            },
            close() {
                this.dataForm = {
                    id: "",
                    name: "",
                    longitude: "",
                    latitude: "",
                    type: "",
                    info: "",
                    status: "",
                    remark: "",
                    delFlag: "",
                    creator: "",
                    createDate: "",
                    updater: "",
                    updateDate: "",
                };
                this.$emit("changeDisabled");
            },
            init() {
                this.visible = true;
                this.$nextTick(() => {
                    this.$refs["dataForm"].resetFields();
                    if (this.dataForm.id) {
                        this.getInfo();
                    }
                });
            },
            // 获取信息
            getInfo() {
                this.$http
                    .get("/sys/istraffic/" + this.dataForm.id)
                    .then(({
                               data: res
                           }) => {
                        if (res.code !== 0) {
                            return this.$message.error(res.msg);
                        }
                        this.dataForm = {
                            ...this.dataForm,
                            ...res.data,
                        };
                        this.dataForm.type = this.dataForm.type + "";
                        this.$refs.type.selectValue = this.dataForm.type;
                    })
                    .catch(() => {});
            },
            // 表单提交
            dataFormSubmitHandle: debounce(
                function () {
                    this.$refs["dataForm"].validate((valid) => {
                        if (!valid) {
                            return false;
                        }
                        this.$http[!this.dataForm.id ? "post" : "put"](
                            "/sys/istraffic/",
                            this.dataForm
                        )
                            .then(({
                                       data: res
                                   }) => {
                                if (res.code !== 0) {
                                    return this.$message.error(res.msg);
                                }
                                this.$message({
                                    message: this.$t("prompt.success"),
                                    type: "success",
                                    duration: 500,
                                    onClose: () => {
                                        this.visible = false;
                                        this.$emit("refreshDataList");
                                    },
                                });
                            })
                            .catch(() => {});
                    });
                },
                1000, {
                    leading: true,
                    trailing: false
                }
            ),
        },
    };
</script>
